import * as React from "react";
import {
    Box,
    Button,
    Table,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Paper,
    Stack,
} from "@mui/material";
import {useCheckAllAttendance} from "../hooks/useCheckAllAttendance.ts";
import {useExportReport} from "../hooks/useExportReport.ts";

interface Data {
    id: string;
    name: string;
    date: string;
    phone_number: string;
    check_in_time: string;
    check_out_time: string;
    status: string;
}

const Attendance: React.FC = () => {
    const {exportReport} = useExportReport();

    const {checkAllAttendance, data, error} = useCheckAllAttendance();
    const [attendanceData, setAttendanceData] = React.useState<Data[]>([]);

    React.useEffect(() => {
        const fetchAttendance = async () => {
            await checkAllAttendance();
            if (error) {
                console.log(error);
                return;
            }
            if (data) {
                const dataArray: Data[] = JSON.parse(data);
                setAttendanceData(dataArray);
            }
        };
        fetchAttendance();
    }, [data]);


    return (
        <Box>
            <Stack direction="row" sx={{marginTop: 1, marginBottom: 1, justifyContent: 'space-between'}}>
                {/*<Stack direction="row" spacing={3}>*/}
                {/*    <TextField label="工号" variant="standard"/>*/}
                {/*    <TextField label="日期" variant="standard"/>*/}
                {/*    <Button variant="contained" sx={{*/}
                {/*        backgroundColor: '#21C491',*/}
                {/*        '&:hover': {backgroundColor: '#1EB384'}*/}
                {/*    }}>查询</Button>*/}
                {/*</Stack>*/}
                <Button variant="contained"
                        onClick={exportReport}
                        sx={{
                            backgroundColor: '#21c491',
                            '&:hover': {backgroundColor: '#1eb384'}
                        }}>导出</Button>
            </Stack>
            <TableContainer component={Paper}>
                <Table sx={{minWidth: 350}}>
                    <TableHead>
                        {/*表头*/}
                        <TableRow>
                            <TableCell>工号</TableCell>
                            <TableCell>姓名</TableCell>
                            <TableCell>日期</TableCell>
                            <TableCell>电话号码</TableCell>
                            <TableCell>上班签到时间</TableCell>
                            <TableCell>下班签退时间</TableCell>
                            <TableCell>考勤情况</TableCell>
                        </TableRow>
                    </TableHead>

                    <tbody>
                    {attendanceData.map((row) => (
                        <TableRow key={row.date + row.id}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.name}</TableCell>
                            <TableCell>{row.date}</TableCell>
                            <TableCell>{row.phone_number}</TableCell>
                            <TableCell>{row.check_in_time}</TableCell>
                            <TableCell>{row.check_out_time}</TableCell>
                            <TableCell>{row.status}</TableCell>
                        </TableRow>
                    ))}
                    </tbody>
                </Table>
            </TableContainer>
        </Box>
    );
}

export default Attendance;
